<template>
	<view class="page">
    <view class="page-baner" :style="'background-image: url('+indexBg+');'">
      <u-navbar :fixed="false" leftIcon=" " :autoBack="false" title="首页" titleStyle ="color: #fff;" placeholder bgColor="transparent"></u-navbar>
      <view class="content" @click="toLogin">
        <view class="content-left">
          <view class="text">简约而不简单</view>
          <view class="text">专业安全便捷</view>
          <view class="btn">注册/登录</view>
        </view>
        <image class="banner" src="https://gowork365.com/prod-api/profile/mini/index/banner.png" mode="widthFix" />
      </view>
    </view>
    <view class="icon-box">
      <view class="icon-title">
        <image src="https://gowork365.com/prod-api/profile/mini/index/title1.png" mode="widthFix" />
        <text>高效功能</text>
      </view>
      <view class="icon-list">
        <view class="icon-item">
          <image src="https://gowork365.com/prod-api/profile/mini/index/icon1.png" mode="widthFix" />
          <view class="text">公司治理</view>
        </view>
        <view class="icon-item">
          <image src="https://gowork365.com/prod-api/profile/mini/index/icon2.png" mode="widthFix" />
          <view class="text">员工关系</view>
        </view>
        <view class="icon-item">
          <image src="https://gowork365.com/prod-api/profile/mini/index/icon3.png" mode="widthFix" />
          <view class="text">合同管理</view>
        </view>
      </view>
    </view>
    <view class="service-box">
      <view class="service-title">
        <image src="https://gowork365.com/prod-api/profile/mini/index/title2.png" mode="widthFix" />
        <text>平台服务</text>
      </view>
      <view class="service-list">
        <view class="service-item" @click.stop="jumpTo('/pages/webView/webView', {url: 'https://11092391.saas.53kf.com/code/xcx/bb6e2325e8f2435de273e8ef5ce483575/1'})">
          <image class="item-bg" src="https://gowork365.com/prod-api/profile/mini/index/service1.png" />
          <view class="item-content">
            <view>咨询律师</view>
            <image class="item-btn" src="https://gowork365.com/prod-api/profile/mini/index/toPage.png" mode="widthFix" />
          </view>
        </view>
        <view class="service-item" @click.stop="jumpTo('/pages/webView/webView', {url: 'https://11092391.saas.53kf.com/code/xcx/bb6e2325e8f2435de273e8ef5ce483575/2'})">
          <image class="item-bg" src="https://gowork365.com/prod-api/profile/mini/index/service2.png" />
          <view class="item-content">
            <view>股权架构</view>
            <image class="item-btn" src="https://gowork365.com/prod-api/profile/mini/index/toPage.png" mode="widthFix" />
          </view>
        </view>
        <view class="service-item" @click.stop="jumpTo('/pages/webView/webView', {url: 'https://11092391.saas.53kf.com/code/xcx/bb6e2325e8f2435de273e8ef5ce483575/1'})">
          <image class="item-bg" src="https://gowork365.com/prod-api/profile/mini/index/service3.png" />
          <view class="item-content">
            <view>合同审查</view>
            <image class="item-btn" src="https://gowork365.com/prod-api/profile/mini/index/toPage.png" mode="widthFix" />
          </view>
        </view>
        <view class="service-item" @click.stop="jumpTo('/pages/webView/webView', {url: 'https://11092391.saas.53kf.com/code/xcx/bb6e2325e8f2435de273e8ef5ce483575/3'})">
          <image class="item-bg" src="https://gowork365.com/prod-api/profile/mini/index/service4.png" />
          <view class="item-content">
            <view>薪酬规划</view>
            <image class="item-btn" src="https://gowork365.com/prod-api/profile/mini/index/toPage.png" mode="widthFix" />
          </view>
        </view>
        <view class="service-item" @click.stop="jumpTo('/pages/webView/webView', {url: 'https://11092391.saas.53kf.com/code/xcx/bb6e2325e8f2435de273e8ef5ce483575/2'})">
          <image class="item-bg" src="https://gowork365.com/prod-api/profile/mini/index/service5.png" />
          <view class="item-content">
            <view>合同定制</view>
            <image class="item-btn" src="https://gowork365.com/prod-api/profile/mini/index/toPage.png" mode="widthFix" />
          </view>
        </view>
        <view class="service-item" @click.stop="jumpTo('/pages/webView/webView', {url: 'https://11092391.saas.53kf.com/code/xcx/bb6e2325e8f2435de273e8ef5ce483575/3'})">
          <image class="item-bg" src="https://gowork365.com/prod-api/profile/mini/index/service6.png" />
          <view class="item-content">
            <view>人员激励</view>
            <image class="item-btn" src="https://gowork365.com/prod-api/profile/mini/index/toPage.png" mode="widthFix" />
          </view>
        </view>
      </view>
    </view>
    <view @click="toLogin">
      <customTabbar value="" />
    </view>
	</view>
</template>

<script>
import customTabbar from '../../components/customTabbar.vue'
import indexBg from '../../static/index/indexBg.png'

export default {
  components: {
    customTabbar,
  },
  data() {
    return {
      indexBg,
    }
  },
  onShow() {
  },
  methods: {
    toLogin() {
      const that = this
      uni.showModal({
        title: '提示',
        content: '尚未登录,请先登录',
        success: (res) => {
          if (res.confirm) {
            that.jumpTo('/pages/login/login')
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.page{
	width: 750rpx;
	min-height: 100vh;
  padding-bottom: 40rpx;
  .page-baner {
    height: 690rpx;
    background-repeat: no-repeat;
    background-size: 750rpx 690rpx;
    .content {
      display: flex;
      width: 686rpx;
      margin: 10rpx auto 0;
      align-items: center;
      justify-content: center;
      .content-left {
        .text {
          font-family: FZZDHJW--GB1, FZZDHJW--GB1;
          font-weight: 800;
          font-size: 48rpx;
          color: #FFFFFF;
          line-height: 58rpx;
          margin-bottom: 8rpx;
        }
        .btn {
          width: 156rpx;
          height: 56rpx;
          margin-top: 28rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient( 180deg, #FDC65F 0%, #FEAD54 100%);
          border-radius: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #FFFFFF;
        }
      }
      .banner {
        width: 352rpx;
        height: auto;
      }
    }
  }
  .icon-box {
    margin: -198rpx auto 32rpx;
    width: 686rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(11,102,97,0.2);
    border-radius: 16rpx;
    padding: 32rpx;
    .icon-title {
      display: flex;
      align-items: center;
      gap: 8rpx;
      margin-bottom: 32rpx;
      image {
        width: 32rpx;
        height: auto;
      }
      text {
        font-family: PingFang-SC, PingFang-SC;
        font-size: 24rpx;
        color: rgba(0,0,0,0.85);
      }
    }
    .icon-list {
      display: flex;
      justify-content: space-around;
      .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        image {
          display: block;
          width: 96rpx;
          height: auto;
          margin-bottom: 20rpx;
        }
        .text {
          font-family: PingFangSC, PingFang SC;
          font-size: 24rpx;
          color: rgba(0,0,0,0.85);
        }
      }
    }
  }
  .service-box {
    margin: 0 auto 0;
    width: 686rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(11,102,97,0.2);
    border-radius: 16rpx;
    padding: 32rpx;
    .service-title {
      display: flex;
      align-items: center;
      gap: 8rpx;
      margin-bottom: 32rpx;
      image {
        width: 32rpx;
        height: auto;
      }
      text {
        font-family: PingFang-SC, PingFang-SC;
        font-size: 24rpx;
        color: rgba(0,0,0,0.85);
      }
    }
    .service-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .service-item {
        width: 296rpx;
        height: 196rpx;
        position: relative;
        margin-bottom: 32rpx;
        .item-bg {
          position: absolute;
          width: 296rpx;
          height: 196rpx;
          z-index: 1;
        }
        .item-content {
          z-index: 2;
          position: absolute;
          top: 52rpx;
          left: 32rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: rgba(0,0,0,0.85);
          .item-btn {
            margin-top: 6rpx;
            width: 56rpx;
            height: auto;
          }
        }
      }
    }
  }
}
</style>
